<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>倒计时组件</title>
    <link rel="stylesheet" href="../CSS/countdownstyle.css">
</head>
<body>
    <div class="container">
        <div class="timer">
            <input type="number" id="days" min="0" max="99" placeholder="天">
            <span class="colon">:</span>
            <input type="number" id="hours" min="0" max="23" placeholder="时">
            <span class="colon">:</span>
            <input type="number" id="minutes" min="0" max="59" placeholder="分">
            <span class="colon">:</span>
            <input type="number" id="seconds" min="0" max="59" placeholder="秒">
        </div>
        
        <div class="display">
            <span id="time-display">00:00:00:00</span>
        </div>

        <div class="buttons">
            <button id="start" class="btn">
                <svg class="icon" viewBox="0 0 24 24">
                    <path d="M8 5v14l11-7z"/>
                </svg>
                开始
            </button>
            <button id="pause" class="btn" disabled>
                <svg class="icon" viewBox="0 0 24 24">
                    <path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/>
                </svg>
                暂停
            </button>
            <button id="stop" class="btn" disabled>
                <svg class="icon" viewBox="0 0 24 24">
                    <path d="M6 6h12v12H6z"/>
                </svg>
                结束
            </button>
        </div>

        <!-- 添加历史记录区域 -->
        <div class="history-section">
            <h3 class="history-title">历史记录</h3>
            <div class="history-list" id="history-list">
                <!-- 历史记录将在这里动态添加 -->
            </div>
        </div>
    </div>
    <script src="../JS/countdownscript.js"></script>
</body>
</html> 